<template>
	<view id="loginPage">
		<view class="login-box">
			<image class="avatar" src="../../static/img/login_avatar.png" mode="aspectFill"></image>
			<view class="row tel-row">
				<image class="tel-ico" src="../../static/img/icon-phone.png" mode="aspectFill"></image>
				<input type="text" placeholder="输入手机号" placeholder-class="red" v-model="tel" />
				<view class="row-tip" v-show="forbigTip">
					该手机账号没有权限
				</view>
			</view>
			<view class="row pwd-row">
				<image class="pwd-ico" src="../../static/img/icon-code.png" mode="aspectFill"></image>
				<input type="password" placeholder="输入密码" placeholder-class="red" v-model="pwd" />
				<view class="row-tip" v-show="wrongTip">
					密码错误
				</view>
			</view>
			<view class="forget">
				<view class="fr forget-txt">
					<text class="word" @click="toForget">
						忘记密码？
					</text>
					<navigator class="regist" url="../register/register">注册账号</navigator>
					<!-- <text class="contect" @click="modalVisable=true">
						联系我们
					</text> -->
				</view>
			</view>
			<view class="login-btn" @click="loginIn">
				登录
			</view>
		</view>
		<tel-modal :visable="modalVisable" @close="modalVisable=false"></tel-modal>
	</view>
</template>

<script>
	import telModal from "@/components/tel-modal/tel-modal.vue"
	import api from '../../consts/api.js'

	export default {
		components: {telModal},
		data() {
			return {
				tel: '',
				pwd: '',
				modalVisable: false,
				forbigTip: false,
				wrongTip: false
			}
		},
		methods: {
			toForget() {
				uni.navigateTo({
					url: '../forgetPwd/forgetPwd',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			loginIn() {
				uni.switchTab({
					url: '../index/index'
				})
			},
			thirdLogin() {
				let that = this
				uni.request({
					url: api.thirdLogin,
					method: 'POST',
					data: {
						openid: ''
					},
					success: res => {
						let {code,data} = res.data
						if(code==101) {
								
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			login() {
				let that = this
				uni.request({
					url: api.login,
					method: 'POST',
					data: {
						account: '',
						password: ''
					},
					success: res => {
						let {code,data} = res.data
						if(code==101) {
								
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
#loginPage {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../../static/img/login_bg.png) center center no-repeat;
	background-size: cover;
}
.avatar {
	width: 224upx;
	height: 224upx;
	position: absolute;
	top: -112upx;
	left: 50%;
	margin-left: -112upx;
	z-index: 2;
}
.login-box {
	position: absolute;
	/* top: 168upx; */
	top: 50%;
	left: 50%;
	margin-top: -392upx;
	margin-left: -302upx;
	width:604upx;
	height:784upx;
	background:rgba(17,24,33,1);
	box-shadow:0 1upx 30upx 0 rgba(108,104,0,0.2);
	border-radius:20upx;
	z-index: 1;
}
.row {
	width: 510upx;
	margin: 0 auto;
	height: 71upx;
	font-family:'PingFang SC';
	font-weight:500;
	color:rgba(234,10,42,1);
	line-height:114upx;
	border-bottom: 2upx solid rgb(234,10,42);
	padding: 28upx 3upx;
	display: flex;
	position: relative;
}
.tel-row {
	margin-top: 145upx;
}
.tel-ico {
	width: 27upx;
	height: 43upx;
	margin: 0 42upx 0 0;
}
.pwd-ico {
	width: 31upx;
	height: 35upx;
	margin: 0 33upx 0 0;
}
.pwd-row {
	margin-top: 41upx;
}
.row-tip {
	position: absolute;
	height:23upx;
	font-size:24upx;
	font-family:'PingFang SC';
	font-weight:500;
	color:rgba(128,128,128,1);
	left: 70upx;
	bottom: 10upx;
}

.forget {
	margin: 15upx 50upx 0 0;
}
.forget-txt {
	height:27upx;
	font-size:28upx;
	font-family:'PingFang SC';
	font-weight:500;
	display: flex;
}
.word {
	color: #808080;
	margin-right: 20upx;
}
.regist {
	color: #DA0D2C;
}
.login-btn {
	width:452upx;
	height: 90upx;
	background:#EA0A2A;
	border-radius:45px;
	text-align: center;
	line-height: 90upx;
	margin: 145upx auto 0;
}
</style>
